<template>
    <div class="productSchedule-index yuan-container container">
        <a-card title="生产进度">
            <a-row :gutter="16">
                <a-col :span="8">
                    <a-form-model layout="inline">
                        <a-form-model-item label="填报日期">
                            <a-range-picker :locale="locale" />
                        </a-form-model-item>
                    </a-form-model>
                </a-col>
                <a-col :span="16">
                    <a-form-model layout="inline">
                         <a-form-model-item label="标准类型">
                            <a-select placeholder="标准类型" style="width: 220px;">
                                <a-select-option value="guo">国标</a-select-option>
                                <a-select-option value="sheng">省标</a-select-option>
                            </a-select>
                        </a-form-model-item>
                        <a-form-model-item label="生产类型">
                             <a-select placeholder="生产类型" style="width: 220px;">
                                <a-select-option value="CW">CW</a-select-option>
                                <a-select-option value="SY">SY</a-select-option>
                                <a-select-option value="G">G</a-select-option>
                                <a-select-option value="ZCW">ZCW</a-select-option>
                            </a-select>
                        </a-form-model-item>
                         <a-form-model-item label="品种名称">
                             <a-select placeholder="品种名称" style="width: 220px;">
                                <!-- 品种名称选项 -->
                            </a-select>
                        </a-form-model-item>
                    </a-form-model>
                </a-col>
            </a-row>
            <a-row style="margin-top: 20px;">
                <a-col :span="24">
                     <!-- 图表区域 -->
                     <div id="production-chart" style="width: 100%; height: 400px;"></div>
                </a-col>
            </a-row>

            <!-- Tab 区域 -->
            <a-tabs class="tab-container" default-active-key="前处理" @change="onTabChange">
                <a-tab-pane v-for="tabName in tabNames" :key="tabName" :tab="tabName">
                    <!-- 统计和表格区域 -->
                    <a-row :gutter="16" style="margin-top: 20px;">
                        <a-col :span="8">
                            <!-- 批号数量统计 -->
                             <a-card title="批号数量" size="small">
                                 <div class="cards" style="">2</div>
                                 <div>批号数量</div>
                             </a-card>
                        </a-col>
                        <a-col :span="8">
                             <!-- 累计产出量统计 -->
                             <a-card title="累计产出量" size="small">
                                 <div class="cards">400.00kg</div>
                                 <div>累计产出量</div>
                             </a-card>
                        </a-col>
                         <a-col :span="8">
                             <!-- 累计投料量统计 -->
                              <a-card title="累计投料量" size="small">
                                 <div class="cards">600.00kg</div>
                                 <div>累计投料量</div>
                             </a-card>
                        </a-col>
                    </a-row>
                     <a-row style="margin-top: 20px;">
                        <a-col :span="24">
                            <!-- 详细列表 -->
                            <a-table bordered :columns="columns" :data-source="dataSource" rowKey="id" :pagination="false"/>
                        </a-col>
                    </a-row>
                </a-tab-pane>
            </a-tabs>
        </a-card>
    </div>
</template>
<script lang="ts">
import warningApi from "@/api/warningApi";
import { Vue, Component } from "vue-property-decorator";
// 引入 echarts
import { echartLoad } from "@/utils";
import locale from "ant-design-vue/lib/date-picker/locale/zh_CN";

@Component({
    name: "indexEchart",
    components: {  },
})
export default class index extends Vue {
    locale =  locale
    // Tab 名称数据
    tabNames = ['前处理','提取','喷干','过筛','混一','混二','制粒','小袋分装','大袋分装','小袋外包','大袋外包'];
    // 当前选中的 Tab Key
    activeTabKey = '前处理';

    // 表格列定义
    columns = [
        { title: '选择', dataIndex: 'select', key: 'select' },
        { title: '填报日期', dataIndex: 'date', key: 'date' },
        { title: '标准类型', dataIndex: 'standard', key: 'standard' },
        { title: '品名', dataIndex: 'name', key: 'name' },
        { title: '批号', dataIndex: 'batch', key: 'batch' },
        { title: '产出量(kg)', dataIndex: 'output', key: 'output' },
        { title: '投料量(kg)', dataIndex: 'input', key: 'input' },
    ];

    // 表格数据
    dataSource = [
        { id: 1, select: '', date: '2025/09/09', standard: '国标', name: '川芎', batch: '324354', output: 200.00, input: 300.00 },
        { id: 2, select: '', date: '2025/09/09', standard: '省标', name: '川芎', batch: '234421', output: 200.00, input: 300.00 },
    ];

    mounted() {
        this.initChart();
    }

    // Tab 切换事件
    onTabChange(key: string) {
        console.log('Tab changed to:', key);
        this.activeTabKey = key;
        // TODO: 根据选中的 Tab Key 更新统计数据和表格数据
    }

    initChart() {
        echartLoad(()=>{
            const chartDom = document.getElementById('production-chart');
            const myChart = window.echarts.init(chartDom);
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['产出量', '投入量']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.tabNames // 使用 tabNames 作为 xAxis 数据
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '数量 (kg)'
                    }
                ],
                series: [
                    {
                        name: '产出量',
                        type: 'bar',
                        data: [4500, 3500, 3200, 4000, 2500, 2300, 4300, 3000, 4500, 3000, 4000],
                        itemStyle: {
                            color: new window.echarts.graphic.LinearGradient(
                                0, 0, 0, 1, // 渐变方向，0,0,0,1 表示从上到下
                                [
                                    {offset: 0, color: '#204FB6'}, // 0% 处的颜色 (浅蓝)
                                    {offset: 1, color: '#4387DC'}  // 100% 处的颜色 (深蓝)
                                ]
                            )
                        }
                    },
                    {
                        name: '投入量',
                        type: 'bar',
                        data: [3300, 2500, 2000, 4300, 2800, 2000, 2000, 4000, 4300, 3000, 4000],
                        itemStyle: {
                            color: new window.echarts.graphic.LinearGradient(
                                0, 0, 0, 1, // 渐变方向，0,0,0,1 表示从上到下
                                [
                                    {offset: 0, color: '#FFA842'}, // 0% 处的颜色 (浅黄)
                                    {offset: 1, color: '#FFBE71'}  // 100% 处的颜色 (橙黄)
                                ]
                            )
                        }
                    }
                ]
            };
            myChart.setOption(option);
        })

    }
}
</script>
<style lang="scss">
.productSchedule-index {
    .tab-container{
        border-top: 1px solid #ececec;
        .cards{
            text-align: center; 
            font-size: 24px;
            font-weight: bold;
        }
        .cards+div{
            text-align: center;
        }
    }
}
</style>
